<template>
    <div class='body'>
        <div class="main">
            <div class="top">
            </div>
            <div class="bom" style="padding: 0 15px 50px;">

                <el-table :data="tableData" stripe style="width: 1060px">
                    <el-table-column align="center" prop="id" label="创建者id" width="80" />
                    <el-table-column align="center" prop="itemid" label="项目id" width="80" />
                    <el-table-column align="center" prop="itemtitle" label="投票标题" width="180"
                        :show-overflow-tooltip='true' />
                    <el-table-column align="center" prop="txt" label="投票介绍" width="180" :show-overflow-tooltip='true' />
                    <el-table-column align="center" prop="nruntime" label="开始时间" width="180" />
                    <el-table-column align="center" prop="nstoptime" label="结束时间" width="180" />
                    <el-table-column align="center" width="180" label="操作">
                        <template #default="scope">
                            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                                编辑
                            </el-button>
                            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination background @current-change="handleCurrentChange" v-model:current-page="currentPage4"
                    layout="prev, pager, next" :total="cons" />
            </div>
        </div>
    </div>
    <!-- 删除对话框 -->
    <el-dialog v-model="dialogVisible" title="Tips" width="500" :show-close="false" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <span>确定删除?<span style="color: red;">（无法撤销）</span></span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="ysdel(qritem)">
                    删除
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 抽屉 -->
    <el-drawer v-model="drawer" title="修改投票信息" direction="rtl" :before-close="handleClose">
        <span>你好, {{ imgs.name }}!</span>
        <div style="display: flex;align-items: center;margin-top: 50px;">
            <span style="width: 100px;">创建者id: </span>
            <el-input v-model="newitem.id" style="width: 240px" disabled placeholder="请输入创建者id" />
        </div>
        <div style="display: flex;align-items: center;margin-top: 25px;">
            <span style="width: 100px;">投票id: </span>
            <el-input v-model="newitem.itemid" style="width: 240px" disabled placeholder="请输入投票id" />
        </div>
        <div style="display: flex;align-items: center;margin-top: 25px;">
            <span style="width: 100px;"> 投票标题：</span>
            <el-input v-model="newitem.itemtitle" style="width: 240px" placeholder="请输入标题" />
        </div>
        <div style="display: flex;align-items: center;margin-top: 25px;">
            <span style="width: 100px;">投票介绍：</span>
            <el-input v-model="newitem.jie" show-word-limit maxlength="110" rows="4" resize="none"
                :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" style="width: 240px" placeholder="请输入描述" />
        </div>
        <div class="demo-date-picker" style="margin-top: 25px;">
            <div class="block">
                <el-date-picker v-model="newitem.timevalue" type="daterange" range-separator="To"
                    start-placeholder="Start date" end-placeholder="End date" size="small" />
            </div>
        </div>
        <div style="margin-top: 25px;width: 100%;display: flex;justify-content: space-around">
            <el-button type="warning" style="width: 150px;margin-left: -75px;" @click="cancelClick">确认修改</el-button>
        </div>
    </el-drawer>
</template>
<script setup lang='ts'>
import { upitem, itemdata, delitem, toudata } from '@/api/info/index'
import moment from 'moment';
import { ElMessage, ElMessageBox } from 'element-plus'
const open4 = (data?: any) => {
    if (data) {
        ElMessage.error(data)
    } else {
        ElMessage.error('Oops, this is a error message.')
    }
}
const open2 = (data?: any) => {
    if (data) {
        ElMessage({
            message: data,
            type: 'success',
        })
    } else {
        ElMessage({
            message: 'Congrats, this is a success message.',
            type: 'success',
        })
    }

}
let tableData = ref()
let imgs = ref()
onMounted(() => {
    listdata(1, 10)

    // 获取当前时间
    // const loginTime1 = new Date();
    // let aaa = moment(loginTime1).format('YYYY-MM-DD HH:mm:ss');
    // console.log("aaaa", aaa);


    // 测试base64存储
    toudata().then((res: any) => {
        console.log("imgs", res);
        imgs.value = res.data[0]

    })
})

// 获取投票列表
let listdata = (pageNumber: any, size: any, id?: any) => {
    itemdata({
        id,
        pageNumber,
        size
    }).then((res: any) => {
        console.log('日志', res)
        res.data.data.forEach((item: any) => {
            item.nruntime = moment(item.runtime).format('YYYY-MM-DD HH:mm:ss'); // 格式化为"年-月-日 时:分:秒"
            item.nstoptime = moment(item.stoptime).format('YYYY-MM-DD HH:mm:ss'); // 格式化为"年-月-日 时:分:秒"
        });
        tableData.value = res.data.data.reverse()
        cons.value = res.data.conts
    })
}
// 编辑
// 编辑时存储的数据
let newitem: any = reactive({
    id: "",
    itemid: "",
    timevalue: [],
    itemtitle: "",
    jie: ""
})
const handleEdit = (index: number, row: any) => {
    console.log(index, row)
    drawer.value = true
    newitem.id = row.id
    newitem.timevalue[0] = row.runtime
    newitem.timevalue[1] = row.stoptime
    newitem.itemid = row.itemid
    newitem.jie = row.txt
    newitem.itemtitle = row.itemtitle
}
const handleDelete = (index: number, row: any) => {
    console.log(index, row)
    qritem.value = row
    dialogVisible.value = true

}
// 删除时存储的itemid
let qritem = ref()
// 删除对话框
const dialogVisible = ref(false)

let ysdel = (row: any) => {
    delitem({ itemid: row.itemid }).then(res => {
        console.log(res);
        if (res.data) {
            open2(res.data)
        } else {
            open4(res.data)
        }
        dialogVisible.value = false
        listdata(currentPage4.value, 10)
    })
}
// 分页
let cons = ref()
const currentPage4 = ref(1)


const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    listdata(val, 10)
}
// 抽屉
const drawer = ref(false)
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('确定取消修改？')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
function cancelClick() {
    console.log(12132);
    upitem(newitem).then(res => {
        console.log("as4444", res);
        if (res.data.message) {
            open2(res.data.message)
            drawer.value = false
            newitem.id = ""
            newitem.timevalue[0] = ""
            newitem.timevalue[1] = ""
            newitem.itemid = ""
            newitem.jie = ""
            newitem.itemtitle = ""
            listdata(1, 10)
        } else {
            open4(res.data.msg)
        }
    })




}
</script>
<style  lang='less'>
.body {
    background-color: rgb(245, 249, 250);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .main {
        width: 80%;
        height: 95%;
        // background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;


        .top {
            width: 100%;
            height: 10%;
            background-color: #fff;
            box-sizing: border-box;
            padding: 10px 0px 10px 25px;
            display: flex;
            align-items: center;
        }

        .bom {
            width: 100%;
            height: 89%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background-color: #fff;
            box-sizing: border-box;
            padding-top: 25px;
            padding-left: 10px;
        }
    }
}
</style>